import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar, DLookImages } from '@/components'
import { AtButton } from 'taro-ui'
import './applicationinfo.scss'
import http from '@/api'
const itembg = require('../assets/pic@2x.png')

export default class ApplicationinfoBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id: '',
      active: '',
      title: '申请资料',
      firstList: [],
      secondList: [],
      thirdList: [],
      forthList: [],
      fifthList: [],
      sixthList: [],
      roadMapList: [],
      otherList: [],
      list: [],
      status: '',
      companycar: {
        itemStatus: false,
        itemUrl: ''
      }
    }
  }
  componentWillMount() {
    let { id = '', active = '', status } = this.$router.params
    this.setState({
      id,
      active,
      status,
      title: this.getTitle(active)
    })
    this.getAdvancePhoto(id, active)
  }
  getTitle(active) {
    return {
      $0: '申请资料',
      $1: '验车照片',
      $2: '合同凭证'
    }[`$${active}`]
  }
  getAdvancePhoto(id, active) {
    let obj = {
      afBusstype: active,
      refAmId: id
    }
    let { firstList, secondList, thirdList, forthList, fifthList, sixthList, list, roadMapList, otherList } = this.state
    http.getAdvancePhoto(obj).then(res => {
      if (!res) {
        return
      }
      if (active === '0') {
        res.map(item => {
          if (item.afFileType === '1') {
            firstList.push({
              url: item.afUrl
            })
          }
          if (item.afFileType === '2') {
            secondList.push({
              url: item.afUrl
            })
          }
          if (item.afFileType === '6') {
            thirdList.push({
              url: item.afUrl
            })
          }
          if (item.afFileType === '7') {
            forthList.push({
              url: item.afUrl
            })
          }
          if (item.afFileType === '8') {
            fifthList.push({
              url: item.afUrl
            })
          }
          if (item.afFileType === '9') {
            sixthList.push({
              url: item.afUrl
            })
          }
          if (item.afFileType === '11') {
            roadMapList.push({
              url: item.afUrl
            })
          }
          if (item.afFileType === '12') {
            otherList.push({
              url: item.afUrl
            })
          }
        })
      } else {
        res.map(item => {
          list.push({
            url: item.afUrl
          })
        })
      }
      this.setState({
        firstList,
        secondList,
        thirdList,
        forthList,
        fifthList,
        roadMapList,
        otherList,
        list
      })
    })
  }
  handleConfirm() {
    let { id } = this.state
    this.confirmCarPhoto(id)
  }

  handleFinish() {
    let { id } = this.state
    this.confirmContractPhoto(id)

  }

  //确认验车
  confirmCarPhoto(id) {
    http.confirmCarPhoto({ id }).then(() => {
      Taro.redirectTo({
        url: `/pages/itemdetail/advancedetail?id=${id}&status=3`
      })
    })
  }

  //完成交易
  confirmContractPhoto(id) {
    http.confirmContractPhoto({ id }).then(() => {
      Taro.redirectTo({
        url: `/pages/itemdetail/advancedetail?id=${id}&status=6`
      })
    })
  }

  onLookHandle(url, i, arr) {
    if (window.bridge) {
      let _images = []
      arr.map(item => {
        _images.push(item.url)
      })
      window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
    } else {
      this.setState({
        companycar: {
          ...this.state.companycar,
          itemStatus: true,
          itemUrl: url
        }
      })
    }
  }

  onLookItem() {
    this.setState({
      companycar: {
        ...this.state.companycar,
        itemStatus: false,
        itemUrl: ''
      }
    })
  }


  render() {
    const {
      title,
      firstList,
      secondList,
      thirdList,
      forthList,
      fifthList,
      sixthList,
      otherList,
      roadMapList,
      list,
      active,
      status,
      companycar
    } = this.state
    return (
      <View className='b_applicationinfo'>
        <DNavBar title={title}></DNavBar>
        <View className='b_applicationinfo__box'>
        </View>
        <View className='b_applicationinfo__images'>
          {active === '0' &&
            <View className="b_applicationinfo__images_enterpris">
              <View className='b_applicationinfo__images_enterpris_item'>
                <Text className='item_title'>车主身份证</Text>
                {firstList && firstList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image item_first_images' onClick={this.onLookHandle.bind(this, item.url, i, firstList)}></Image>
                })
                }
              </View>
              <View className="b_applicationinfo__images_enterpris_item">
                <Text className="item_title">采购合同</Text>
                {secondList && secondList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                })
                }
              </View>
              <View className="b_applicationinfo__images_enterpris_item">
                <Text className="item_title">订金合同</Text>
                {thirdList && thirdList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                })
                }
              </View>
              <View className="b_applicationinfo__images_enterpris_item">
                <Text className="item_title">同贷信息</Text>
                {forthList && forthList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                })
                }
              </View>
              <View className="b_applicationinfo__images_enterpris_item">
                <Text className="item_title">审核表</Text>
                {sixthList && sixthList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                })
                }
              </View>
              <View className="b_applicationinfo__images_enterpris_item">
                <Text className="item_title">确认书</Text>
                {secondList && secondList.map((item, i) => {
                  return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                })
                }
              </View>
              {
                roadMapList.length != 0 && <View className="b_applicationinfo__images_enterpris_item">
                  <Text className="item_title">付款路径图</Text>
                  {roadMapList && roadMapList.map((item, i) => {
                    return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                  })
                  }
                </View>
              }
              {
                otherList.length != 0 && <View className="b_applicationinfo__images_enterpris_item">
                  <Text className="item_title">其他</Text>
                  {
                    otherList && otherList.map((item, i) => {
                      return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, secondList)}></Image>
                    })
                  }
                </View>
              }
            </View>
          }
          {active !== '0' &&
            <View className="b_applicationinfo__images_enterpris">
              <View className='b_applicationinfo__images_enterpris_item'>
                {
                  list && list.map((item, i) => {
                    return <Image key={i} src={item.url} className='item_image' onClick={this.onLookHandle.bind(this, item.url, i, list)}></Image>
                  })
                }
              </View>
            </View>
          }

        </View>
        <View className='b_applicationinfo__footer'>
          {status === '1' &&
            <AtButton className='item_btn' onClick={active === '1' ? this.handleConfirm.bind(this) : this.handleFinish.bind(this)}>{active === '1' ? '完成验车' : '交易完成'}</AtButton>
          }
        </View>
        <DLookImages status={companycar.itemStatus} url={companycar.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>
      </View>
    )
  }
}
